import React, { PureComponent } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Popconfirm, Button } from 'antd';
import { StandardTable, SearchForm } from '@joy/joy-pro';
import { connect } from 'dva';
import authUtil from '@/utils/auth';
import styles from './index.less';
import { getReportList } from '@/services/city';

const pageInfo = { showSizeChanger: true, showQuickJumper: true, defaultPageSize: 10 };
@connect(({ global, loading, report, authority }) => ({
  tableData: report.tableData,
  IssueChannelList: report.IssueChannelList,
  SalespersonList: report.SalespersonList,
  ManufactureList: report.ManufactureList,
  searchForm: report.searchForm,
  permissionsList: authority.permissionsList,
  tableLoading: loading.effects['report/getCityBusinessReport'],
  watermarkConfig: global.watermarkConfig,
}))
class Report extends PureComponent {
  state = {
    selectedRows: [],
    params: {},
    pageRequest: {
      pageNum: 1,
      pageSize: 10,
    },
    loading: true,
    inputConfig: [
      {
        type: 'select',
        placeholder: '请选择绑卡类型',
        optionData: [{ value: '0', name: '社保卡' }, { value: '1', name: '公积金卡' }],
        name: 'type',
        label: '绑卡类型',
        selectProps: {
          allowClear: true,
        }
      }
    ],
  };
  constructor(props) {
    super(props);
    this.$drawerForm = React.createRef();
    const { pageRequest, params } = this.state;
    this.getQueryList(params, pageRequest);
  }

  // 条件筛选
  /**
   * @description 条件筛选 [搜索]
   * @author zhe
   * @date 2020-04-13
   * @param {*} formData
   * @param {*} reaclData
   * @param {*} isClear
   * @memberof
   */
  actionSearch = (formData, reaclData, isClear) => {
    const params = formData;
    const pageRequest = { pageNum: 1, pageSize: 10 };
    this.setState({
      params: params,
    });
    this.getQueryList(params, pageRequest);
  };

  /**
   * @description 请求列表数据
   * @author zhe
   * @date 2020-04-13
   * @param {*} params
   * @param {*} pageRequest
   * @memberof
   */
  getQueryList = async (params, pageRequest) => {
    const responseData = await getReportList();
    console.log(responseData)
    const type = 'report/getCityBusinessReport';
    const param = Object.assign(pageRequest, params);
    const { dispatch } = this.props;
    dispatch({
      type,
      payload: param,
    });
  };
  /**
   * @description table操作触发改变事件
   * @author songs
   * @date 2019-07-12
   * @param {*} pagination
   * @param {*} filtersArg
   * @param {*} sorter
   * @memberof managementUser
   */
  handleStandardTableChange = (pagination, filtersArg, sorter, actionType) => {
    const { pageSize, current } = pagination;
    const pageNum = current;
    const pageRequest = { pageSize, pageNum };
    this.getQueryList(filtersArg, pageRequest);
  };
  onHandleDelete = record => {
    const _this = this;
    this.deleteData(record).then(function () {
      const { params } = _this.state;
      const { tableData } = _this.props;
      const { pagination = {} } = tableData;
      const { pageNum, pageSize } = pagination;
      const pageRequest = { pageNum: pageNum, pageSize: pageSize };
      _this.getQueryList(params, pageRequest);
    });
  };

  // comment-end=========================================================>>>>>>>>>>>>>>>>>>>>>>>>

  tableCol = () => {
    const OptionNode = ({ record }) => (
      <div className={styles.tableButtonGroup}>
        <Button
          type="link"
          style={{ marginRight: '20px' }}
          onClick={() => {
            this.changeDrawerStatus(true, 'edit', record);
          }}
        >
          编辑
        </Button>
        <Button
          type="link"
          style={{ marginRight: '20px' }}
          onClick={() => {
            this.changeDrawerStatus(true, 'edit', record);
          }}
        >
          推送
        </Button>
        <Popconfirm placement="top" title="删除" onConfirm={() => this.onHandleDelete(record)} okText="确定" cancelText="取消">
          <Button type="link">删除 </Button>
        </Popconfirm>
      </div>
    );
    return [
      {
        title: '城市',
        dataIndex: 'buzzType',
        render: text => { return configData['buzz_type'] && configData['buzz_type'][text] },
        width: '10%',
      },
      {
        title: '绑卡类型',
        dataIndex: 'createTime',
        render: text => { return authUtil.formatDate(text, 'Y-M-D h:m:s') },
        width: '10%',
      },
      {
        title: '解析失败数量',
        dataIndex: 'authSource',
        render: text => { return configData['auth_source'] && configData['auth_source'][text] },
        width: '8%',
      },
      {
        title: '创建时间',
        dataIndex: 'authSource2',
        render: text => { return configData['auth_source'] && configData['auth_source'][text] },
        width: '8%',
      }
    ];
  };

  render() {
    const { tableCol } = this;
    const { selectedRows, inputConfig } = this.state;
    const { tableLoading, watermarkConfig, tableData } = this.props;
    const { list = [], pagination = {} } = tableData;
    return (
      <div>
        <PageHeaderWrapper title="" className="hasContent">
          <div style={{ background: '#fff', padding: '20px 0px 0px 24px', marginBottom: '10px' }}>
            <SearchForm
              defaultInput={inputConfig.slice(0, 3)}
              moreInput={inputConfig.slice(3)}
              gutter={{ md: 10 }}
              useCol={{ sm: 24, md: 12, xl: 8, xxl: 8 }}
              onSearch={this.actionSearch}
            ></SearchForm>
          </div>
          <Card bordered={false}>
            <StandardTable
              isWatermark
              watermark={{ ...watermarkConfig }}
              dataSource={list}
              // showSelect
              selectedRows={selectedRows}
              pagination={{ ...pagination, ...pageInfo }}
              columns={tableCol()}
              loading={tableLoading}
              rowKey={(record, index) => index}
              // onSelectRow={this.handleSelectRows}
              onChange={($pagination, filtersArg, sorter) => {
                this.handleStandardTableChange($pagination, this.state.params, sorter, 'report/getCityBusinessReport');
              }}
            ></StandardTable>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default Report;
